<template>
  <div v-show="detailedPageVisible" class="app-container">

    <!-- PageHeader 页头 -->
    <el-page-header @back="goBack">
      <template v-slot:content>
        设备：{{ deviceDetailInfo.name }}
      </template>
    </el-page-header>

    <!-- 产品查看 -->
    <div class="space-between obvious-container">
      <el-row>
        <el-col :span="4">
          <span>产品：</span>
          <span class="device-quantity">{{ deviceDetailInfo.productName }}</span>&nbsp;&nbsp;
          <el-button type="text" @click="viewProductDetails">查看</el-button>
        </el-col>

        <!-- 设备状态 -->
        <el-col :span="20">
          <!-- 状态显示 -->
          <dict-tag style="float: left" :options="dict.type.iot_device_state" :value="deviceDetailInfo.state.value"/>
          <!-- 状态控制 -->
          <span style="padding-left: 10px">
            <el-button
              v-show="deviceDetailInfo.state.value === 'notActive'"
              size="mini"
              type="text"
              @click="handleDeployDevice"
            >启用
            </el-button>
            <el-button
              v-show="deviceDetailInfo.state.value === 'online'"
              size="mini"
              type="text"
              @click="handleDisconnectDevice"
            >断开连接
            </el-button>
            <el-button
              v-show="deviceDetailInfo.state.value === 'offline'"
              size="mini"
              type="text"
              @click="handleUndeployDevice"
            >禁用
            </el-button>
          </span>

        </el-col>
      </el-row>
    </div>

    <!-- 设备信息、 物模型、 告警设置 -->
    <div class="space-between">
      <el-tabs type="border-card" v-model="tabsActiveName">

        <!-- 设备信息标签 -->
        <el-tab-pane label="设备信息" name="deviceDetails">
          <!-- 设备信息列表 -->
          <device-descriptions/>
        </el-tab-pane>

        <!-- 物模型标签 -->
        <el-tab-pane label="物模型" name="metadata">
          <physical-model v-if="tabsActiveName === 'metadata'"/>
        </el-tab-pane>

        <!-- 设备功能标签 -->
        <el-tab-pane label="设备功能" name="function">
          <function v-if="tabsActiveName === 'function'"/>
        </el-tab-pane>

        <!--子设备管理标签-->
        <el-tab-pane label="子设备管理" v-if="deviceDetailInfo.deviceType.value === 'gateway'" name="children">
          <!--子设备管理页面-->
          <children-device/>
        </el-tab-pane>

        <!--日志管理标签-->
        <el-tab-pane label="日志管理" name="log">
          <!-- 日志列表 -->
          <log-management/>
        </el-tab-pane>

        <!-- todo 暂时注释掉 -->
        <!--告警设置标签-->
<!--        <el-tab-pane label="告警设置" name="alarmSet">
          &lt;!&ndash;告警页面&ndash;&gt;
          <alarm-management/>
        </el-tab-pane>-->

      </el-tabs>
    </div>

  </div>
</template>

<script>

import { mapState } from 'vuex'
//设备详情信息
import DeviceDescriptions from '@/views/iot/device/deviceDescriptions'
//物模型
import PhysicalModel from '@/views/iot/device/physical-model'
//设备功能
import Function from '@/views/iot/device/function'
//日志管理
import LogManagement from '@/views/iot/device/log/logManagement'
// 子设备
import ChildrenDevice from '@/views/iot/device/children'
//告警管理
import AlarmManagement from '@/views/iot/device/alarm/alarmManagement'
import { deployDevice, disconnectDevice, undeployDevice } from '@/api/iot/device'

export default {
  name: 'DeviceDetailed',
  dicts: [
    'iot_device_state'
  ],
  components: {
    // 设备详情组件
    DeviceDescriptions,
    //物模型
    PhysicalModel,
    //设备功能
    Function,
    //日志管理页面
    LogManagement,
    //子设备管理
    ChildrenDevice,
    //告警管理
    AlarmManagement,
  },
  data() {
    return {
      // 当前活动的页签（活动页设备信息）
      tabsActiveName: 'deviceDetails'
    }
  },
  computed: {
    ...mapState({
      // 设备id
      deviceId: state => state.device.deviceId,
      // 设备详情信息
      deviceDetailInfo: state => state.device.deviceDetailInfo,
      // 详情页显示状态
      detailedPageVisible: state => state.device.detailedPageVisible,

      tabsActiveNameStore: state => state.device.tabsActiveName
    })
  },
  watch: {
    // 设备id
    deviceId(id) {
      if (id) {
        // 获取设备详情信息
        this.$store.dispatch('GetDeviceDetailInfo', id)
      }
    },

    tabsActiveName(tagName) {
      // 更新缓存
      this.$store.commit('TABS_ACTIVE_NAME', tagName)
    },

    // 监听其他地方的修改
    tabsActiveNameStore(tagName) {
      this.tabsActiveName = tagName
    },

    /** 还原页签默认值 */
    detailedPageVisible(state) {
      if (state) {
        this.tabsActiveName = 'deviceDetails'
      }
    }
  },

  destroyed() {
    // 还原
    this.$store.commit('DEVICE_ID', undefined)
  },

  methods: {
    /**
     *  返回主页
     *  隐藏详情页
     */
    goBack() {
      this.$store.commit('DEVICE_DETAILED_PAGE_VISIBLE', false)
      // 还原
      this.$store.commit('DEVICE_ID', undefined)
    },

    /** 查看产品详情 **/
    viewProductDetails() {
      this.$router.push({
        path: '/iot/product',
        query: {
          id: this.deviceDetailInfo.productId
        }
      })
    },

    /** 断开设备连接 */
    handleDisconnectDevice() {
      const id = this.deviceId
      this.$modal
        .confirm('是否确认断开id为"' + id + '"的设备？')
        .then(() => {
          return disconnectDevice(id).then(() => {
            // 获取设备详情信息
            this.$store.dispatch('GetDeviceDetailInfo', id)
            this.$modal.msgSuccess('断开成功')
          })
        })
    },

    /** 启用设备 */
    handleDeployDevice() {
      const id = this.deviceId
      this.$modal
        .confirm('是否确认启用id为"' + id + '"的设备？')
        .then(() => {
          return deployDevice(id).then(() => {
            // 获取设备详情信息
            this.$store.dispatch('GetDeviceDetailInfo', id)
            this.$modal.msgSuccess('启用成功')
          })
        })
    },

    /** 禁用设备 */
    handleUndeployDevice() {
      const id = this.deviceId
      this.$modal
        .confirm('是否确认禁用id为"' + id + '"的设备？')
        .then(() => {
          return undeployDevice(id).then(() => {
            // 获取设备详情信息
            this.$store.dispatch('GetDeviceDetailInfo', id)
            this.$modal.msgSuccess('禁用成功')
          })
        })
    }

  }
}
</script>

<style lang="scss" scoped>

// 块与块上下间距
.space-between {
  margin-top: 20px
}

// 上面产品查看、在线状态容器
.obvious-container {
  // 字体大小
  font-size: 14px;

  // 设备数量数字
  .device-quantity {
    // 数字颜色
    color: rgba(0, 0, 0, 0.65)
  }
}

</style>
